<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            width: 600px;
            height: 300px;
            margin: 50px auto;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .header {
            text-align: center;
        }

        .header h2 {
            margin: 0;
            color: white;
            background-color: deeppink;
            padding: 10px;
            border-radius: 5px 5px 0 0;
        }

        .header input {
            width: 70%;
            padding: 10px;
            margin-top: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .header button {
            width: 25%;
            padding: 10px;
            margin-top: 10px;
            background-color: deeppink;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .filter {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }

        .filter input {
            display: none;
        }

        .filter label {
            cursor: pointer;
        }

        .filter input:checked + label {
            font-weight: bold;
            color: #f44336;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        li {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        #waiting {
            background-color: #ffdddd;
        }

        #doing {
            background-color: #ffffdd;
        }

        #finished {
            background-color: #ddffdd;
        }

        .task-buttons {
            display: flex;
            gap: 5px;
        }

        .task-buttons button {
            padding: 5px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        .task-buttons .doing-btn {
            background-color: yellow;
        }

        .task-buttons .finish-btn {
            background-color: plum;
            color: white;
        }

        .task-buttons .remove-btn {
            background-color: #f44336;
            color: white;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h2>My To Do List</h2>
        <input type="text" id="new-task" placeholder="Title...">
        <button id="add-task">Add</button>
    </div>
    <div class="filter">
        <input type="radio" id="all" name="filter" value="all" checked>
        <label for="all">全部</label>
        <input type="radio" id="waiting" name="filter" value="waiting">
        <label for="waiting">Waiting</label>
        <input type="radio" id="doing" name="filter" value="doing">
        <label for="doing">Doing</label>
        <input type="radio" id="finished" name="filter" value="finished">
        <label for="finished">Finished</label>
    </div>
    <ul id="task-list">
    </ul>
</div>
<script>
    document.getElementById('add-task').addEventListener('click', addTask);
    document.getElementById('new-task').addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            addTask();
        }
    });
    document.querySelectorAll('.filter input').forEach(radio => {
        radio.addEventListener('change', filterTasks);
    });

    function addTask() {
        const taskInput = document.getElementById('new-task');
        const taskTitle = taskInput.value.trim();
        if (taskTitle === '') return;

        const taskItem = document.createElement('li');
        taskItem.classList.add('waiting');
        taskItem.innerHTML = `
        <span>Waiting ... ${taskTitle}</span>
        <div class="task-buttons">
            <button class="doing-btn" onclick="moveToDoing(this)">Doing</button>
            <button class="finish-btn" onclick="moveToFinished(this)">Finish</button>
            <button class="remove-btn" onclick="removeTask(this)">×</button>
        </div>
    `;
        document.getElementById('task-list').appendChild(taskItem);
        taskInput.value = '';
        filterTasks();
    }

    function moveToDoing(button) {
        const taskItem = button.closest('li');
        taskItem.classList.remove('waiting');
        taskItem.classList.add('doing');
        taskItem.querySelector('span').innerText = taskItem.querySelector('span').innerText.replace('Waiting ...', 'Doing ...');
        filterTasks();
    }

    function moveToFinished(button) {
        const taskItem = button.closest('li');
        taskItem.classList.remove('doing');
        taskItem.classList.add('finished');
        taskItem.querySelector('span').innerText = taskItem.querySelector('span').innerText.replace('Doing ...', 'Finished ...');
        filterTasks();
    }

    function removeTask(button) {
        button.closest('li').remove();
        filterTasks();
    }

    function filterTasks() {
        const filterValue = document.querySelector('.filter input:checked').value;
        const tasks = document.querySelectorAll('#task-list li');
        tasks.forEach(task => {
            switch (filterValue) {
                case 'all':
                    task.style.display = '';
                    break;
                case 'waiting':
                    task.style.display = task.classList.contains('waiting') ? '' : 'none';
                    break;
                case 'doing':
                    task.style.display = task.classList.contains('doing') ? '' : 'none';
                    break;
                case 'finished':
                    task.style.display = task.classList.contains('finished') ? '' : 'none';
                    break;
            }
        });
    }
</script>
</body>
</html>